<template>
	<view>
		<view :style="{height:StatusBar+'px'}" v-if="types == 2"></view>
		<view class="flex" :style="{height:(windowHeight - 50)+'px'}" v-if="types == 2">
			<scroll-view scroll-y="true" class="bg-col" style="width: 212upx;">
				<view class="f-13">
					
					<view class="p-l-6 flex align-center justify-center" :class="taskFirst == item.id?'fontBold blue act':''" v-for="(item,index) in list" :key="index" @click="chooseTask(item.id,index,1,item)" style="height: 90upx;">
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="flex-1">
				<view class="f-12">
					<view class="h90 p-t-6 p-b-6 p-l-15 p-r-15 flex align-center" :class="taskSecond == item.id?'fontBold blue':''" v-for="(item,index) in list[firstIndex].son_cate" :key="index" @click="chooseTask(item.id,index,2,item)">
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view :style="{height:(windowHeight - 50)+'px'}" v-if="taskType == 2">
			<scroll-view scroll-y="true">
				<view class="f-12">
					<view class="h90 p-t-6 p-b-6 p-l-15 p-r-15 flex align-center" :class="taskThird == item.id?'fontBold blue':''" v-for="(item,index) in subList" :key="index" @click="chooseTask(item.id,index,3,item)">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="flex" :style="{height:(windowHeight - 50)+'px'}" v-if="types == 1">
			<scroll-view scroll-y="true" class="bg-col" style="width: 245upx;">
				<!-- <view class="p-l-5 flex f-13 align-center fontBold" style="height: 90upx;">
					整改任务
				</view>
				<view class="h90 p-t-6 p-b-6 p-l-15 p-r-15 flex align-center f-12" style="height: 90upx;">
					整改任务列表
				</view> -->
				<view class="" v-for="(item,index) in list" :key="item.id">
					
					<view class="p-l-5 flex f-13 align-center fontBold" style="height: 90upx;">
						{{item.cate_name}}
					</view>
					<view class="h90 p-t-6 p-b-6 p-l-15 p-r-15 flex align-center f-12" :class="taskSecond == item2.id?'fontBold blue act':''" v-for="(item2,index2) in item.son_cate" :key="item2.id" @click="chooseTask(item2.id,index2,2,item2)">
						{{item2.cate_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="flex-1">
				<view class="f-12">
					<view class="h90 p-t-6 p-b-6 p-l-15 p-r-15 flex align-center" :class="[taskThird == item.id?'fontBold blue':'',item.is_doable==1?'':'black-9']" v-for="(item,index) in subList" :key="item.id" @click="chooseTask(item.id,index,3,item)">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 50px;"></view>
		<view class="bot-wrap" :class="types == 1 ?'bot-wrap2':''">
			<!-- <view class="flex flex-direction align-center p-r-15" style="width: 110upx;" @click="reset">
				<image src="/static/img/reset.png" class="reset" mode=""></image>
				<view class="black-3 f-12">
					重置
				</view>
			</view> -->
			<!-- <view class="bot-btn" @click="sub" v-if="types == 1">
				{{taskType == 1?'下一步':'确定'}}
			</view> -->
			<view class="bot-btn" @click="sub">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight:0,
				taskType:1,
				taskFirst:0,//id
				taskSecond:0,//
				taskThird:0,//
				list:[],
				firstIndex:0,
				subList:[],
				task_id:0,//最后选中任务id
				StatusBar: this.StatusBar,
				taskFirstStr:'',//标题名
				taskSecondStr:'',//
				taskThirdStr:'',//
				relType:0
			}
		},
		props:{
			types:{//1自己任务 2企业任务
				type:[Number,String],
				default:1
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		created() {
			this.getInfo();
		},
		methods: {
			getInfo(){
				this.$http('Tasks/taskscategory',{type:this.types}).then(res=>{
					let list = [{
						cate_name: "整改任务",
						id: -99,
						son_cate:[{
							cate_name:"整改任务列表",
							id:-100,
							pid:-99
						}]
					}]
					this.list = list;
					this.list = this.list.concat(res.data.cateres);
					if(this.list && this.list.length > 0){
						this.taskFirst = this.list[0].id;
						this.taskFirstStr = this.list[0].cate_name;
						this.taskSecond = this.list[0].son_cate[0].id;
						this.taskSecondStr = this.list[0].son_cate[0].cate_name;
						if(this.types == 1){
							this.getSubInfo();
						}
						
					}
				})
			},
			getSubInfo(){
				if(this.taskSecond == -100){
					this.$http('TasksChange/my_change_list',{type:2,page:1}).then(res=>{
						let list = [];
						res.data.list.forEach(item=>{
							list.push({
								id:item.id,
								tasks_id: item.id,
								title: item.title,
								is_doable:1
							})
						})
						console.log(list)
						this.subList = list;
					})
				}else{
					this.$http('Tasks/taskslist',{type:this.types,cate_id:this.taskSecond,edition:2}).then(res=>{
						this.subList = res.data.tasks_list;
					})
				}
				
			},
			reset(){
				// this.taskType = 1;
				if(this.types == 1){
					this.taskThird = 0;
				}else{
					this.taskSecond = 0;
				}
				
			},
			chooseTask(id,index,type,item){
				if(type == 3&&item.is_doable == 0){
					return;
				}
				switch (type){
					case 1:
						this.taskFirst = id;this.taskFirstStr = item.cate_name;this.firstIndex = index;this.taskSecond = 0; break;
					case 2:
						this.taskSecond = id;this.taskSecondStr = item.cate_name;this.task_id = item.id;this.taskThird = 0;this.getSubInfo(); break;
					case 3:
						this.taskThird = id;this.taskThirdStr = item.title;this.task_id = item.id;
				}
			},
			sub(){
				if(this.types == 2){
					if(this.taskSecond == 0){
						uni.showToast({
							title:'请先选择任务',
							icon:'none'
						});
						return;
					};
					// if(this.types == 1){
					// 	this.taskType = 2;
					// 	this.getSubInfo();
					// }else{
						let obj = {
							task_id:this.task_id,
							task_str:this.taskFirstStr + '—' + this.taskSecondStr
						};
						this.$emit('taskClick',obj);
					// }
				}else{
					if(this.taskThird == 0){
						uni.showToast({
							title:'请先选择任务',
							icon:'none'
						});
						return;
					};
					let obj = {
						taskSecond:this.taskSecond,
						task_id:this.task_id,
						task_str:this.taskFirstStr + '—' + this.taskSecondStr + '—' + this.taskThirdStr
					};
					this.$emit('taskClick',obj);
				}
			},
		}
	}
</script>

<style lang="less">
	page{
		position: relative;
	}
	.reset{
		width: 36upx;
		height: 42upx;
	}
	.h90{
		min-height: 90upx;
	}
	.act{
		background: #fff;
		position: relative;
	}
	.act::before{
		content: '';
		width: 12upx;
		height: 60upx;
		background: #529EFF;
		opacity: 1;
		border-radius: 0px 20upx 20upx 0px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.bot-wrap{
		width: 100%;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding: 0 30upx;
		height: 50px;
		display: flex;
		align-items: center;
		.bot-btn{
			width: 100%;
			height: 90upx;
			background: #529EFF;
			opacity: 1;
			border-radius: 20upx;
			font-size: 32upx;
			font-weight: bold;
			color: #fff;
			line-height: 90upx;
			text-align: center;
		}
	}
	.bot-wrap2{
		position: fixed;
	}
</style>
